import React, { useState } from 'react'

/**
 *  jsx 编写样式
 */
function JsxCss () {
    const [color, setColor ] = useState('blue')
    const changeColor = () => {
        setColor(color=='blue'? 'red' : 'blue')
    }
    return (
        <>
            <div>jsx改变css样式</div>
            <div className="name">jsx改变css样式</div>
            <hr/>
            
            {/* <div style={color:${color}}>jsx改变css样式</div> */}
            <button onClick={changeColor}>改变颜色</button>

            <style jsx>
                {`
                    div{color:${color}}
                    .name{color:red}
                `}
            </style>
        </>
    )

    
}

export default JsxCss